<template>
  <div class="dashboard-container">
    <div>
<!--      <span>-->
<!--        <h1-->
<!--          style="text-align: center;font-size: 40px;color: #0d8d84;font-family: 华文彩云; cursor: pointer;animation: color-change 5s infinite;"-->
<!--        ><strong>数据可视化统计</strong></h1>-->
<!--      </span>-->
      <div id="wenzi" style="width: 100%; height: 100px;" />
      <div>
        <el-button type="success" style="margin-bottom: 20px" @click="uploadFile"> 资源上传 </el-button>
        <el-drawer
          title="资源上传"
          placement="right"
          width="640"
          :closable="false"
          :visible="visible"
          @close="onClose"
        >
          <upload />
        </el-drawer>
      </div>
    </div>
    <div style="display: flex">
      <el-row>
        <el-col :span="12">
          <el-card shadow="hover" style="height: 400px;width: 790px">
            <div id="main" style="width: 750px; height: 400px;" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card v-if="this.user!= 'admin'" shadow="hover" style="height: 400px;width: 790px;margin-left: 25%">
            <div id="zhexian" style="width: 750px; height: 400px;" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card v-if="this.user === 'admin'" shadow="hover" style="height: 400px;width: 790px;margin-left: 25%">
            <div id="pie" style="width: 750px; height: 400px;" />
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row>
        <el-col>
          <el-card shadow="hover" style="height: 400px;width: 100%;margin-top: 4%">
            <el-table :data="fileList" style="width: 100%" border stripe :header-cell-class-name="'headerBg'">
              <el-table-column label="序号" width="60" align="center" type="index">
                <template scope="scope">
                  <span>{{ (pageParams.page - 1) * pageParams.pageSize + scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="unionId" label="加密ID" width="350" align="center" />
              <el-table-column prop="name" label="文件名称" width="width" />
              <el-table-column prop="type" label="文件类型" width="125" />
              <el-table-column prop="chunkNumber" label="分片数量" width="130" />
              <el-table-column prop="directory" label="分片位置" width="430" />
              <el-table-column prop="createTime" label="上传时间" width="130" />
              <el-table-column prop="prop" label="操作" width="200px" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    @click="deleteFood(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              style="margin-top: 20px; textalign: center"
              :current-page="pageParams.page"
              :page-sizes="[3, 5, 10]"
              :page-size="pageParams.pageSize"
              :pager-count="4"
              layout="prev, pager, next, jumper,->,sizes,total"
              :total="pageParams.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
import Upload from '@/views/uploader/uploader/uploader.vue'
export default {
  name: 'Dashboard',
  components: {
    Upload
  },
  data() {
    return {
      chart: null,
      user: localStorage.getItem('user') ? localStorage.getItem('user') : {},
      pieData: [],
      endValue: 5,
      // 加载
      visible: false,
      fileList: [],
      // 分页参数
      pageParams: {
        page: 1,
        pageSize: 5,
        total: 0
      }
    }
  },
  mounted() {
    // 在组件mounted时绑定resize事件，当窗口大小发生变化时自动调整图表大小
    this.MyEcharts()
    this.zhexian()
    this.getFileList()
    this.pie()
    this.wenzi()
  },
  beforeDestroy() {
  },
  methods: {
    wenzi() {
      var chartDom = document.getElementById('wenzi')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: '数据可视化统计',
                fontSize: 80,
                fontWeight: 'bold',
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: 'transparent',
                stroke: '#0d8d84',
                lineWidth: 1
              },
              keyframeAnimation: {
                duration: 3000,
                loop: true,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: 'transparent'
                    }
                  },
                  {
                    percent: 1,
                    style: {
                      fill: '#0d8d84'
                    }
                  }
                ]
              }
            }
          ]
        }
      }
      option && myChart.setOption(option)
    },
    async pie() {
      var chartDom = document.getElementById('pie')
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          text: '各产品收入金额',
          subtext: 'Fake Data',
          left: 'center',
          textStyle: {
            color: '#0d8d84'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '收入金额',
            type: 'pie',
            radius: '50%',
            data: [],
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 元'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      const res = await this.$API.myEcharts.reqbingList()
      if (res.code === 200) {
        console.log('----------------------------------------', res.data[0][0])
        const data = []
        for (let i = 0; i < res.data.length; i++) {
          data.push({
            value: res.data[i][2],
            name: res.data[i][0]
          })
        }
        option.series[0].data = data
        myChart.setOption(option)
      }
    },
    deleteFood(row) {
      const id = {
        id: row.id
      }
      this.$confirm('是否删除该信息？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await this.$API.myEcharts.deleteFileList(id)
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.getFileList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: '你取消了删除'
          })
        })
    },
    // 分页函数
    handleSizeChange(newPageSize) {
      this.pageParams.pageSize = newPageSize
      this.getFileList()
    },
    handleCurrentChange(current) {
      this.pageParams.page = current
      this.getFileList()
    },
    // 获取菜品列表
    async getFileList() {
      const res = await this.$API.myEcharts.reqFileList(this.pageParams)
      if (res.code === 200) {
        this.pageParams.total = res.data.total
        console.log(res.data)
        this.fileList = res.data.fileVoList
      }
    },
    uploadFile() {
      this.visible = true
    },
    onClose() {
      this.visible = false
      this.fileList()
    },
    async MyEcharts() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option = {
        backgroundColor: '#2c343c',
        title: {
          text: '各季度订单数',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },
        // color: ['#c23531'],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '各季度订单数',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [].sort(function(a, b) {
              return a.value - b.value
            }),
            roseType: 'radius',
            label: {
              color: 'rgba(255, 255, 255, 0.3)'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: '#c23531',
              shadowBlur: 1,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function(idx) {
              return Math.random() * 200
            }
          }
        ]
      }
      // 设置 resize 事件监听
      const users = {
        username: this.user
      }
      const res = await this.$API.myEcharts.reqOrderList(users)
      if (res.code === 200) {
        console.error(users)
        option.series[0].data = [
          { value: res.data[0], name: '第一季度' },
          { value: res.data[1], name: '第二季度' },
          { value: res.data[2], name: '第三季度' },
          { value: res.data[3], name: '第四季度' }
        ]
        console.log(option.series[0].data[0])
        console.log(res.data[0])
        myChart.setOption(option)
        // 随着屏幕大小调节图表
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    },
    async zhexian() {
      var chartDom = document.getElementById('zhexian')
      var myChart = echarts.init(chartDom)
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#4DDEAC'
            },
            label: {
              backgroundColor: '#FEB727'
            },
            axisLine: {
              lineStyle: {
                color: '#FEB727'
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: '#FEB727'
              }
            },
            axisLabel: {
              color: '#FEB727'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['种类下蛋糕数量', '个', '个']
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '个',
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            name: '种类数量',
            type: 'line',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 个'
              }
            },
            data: []
          }
        ]
      }
      const users = {
        username: this.user
      }
      const res = await this.$API.myEcharts.reqOrderFoodList(users)
      if (res.code === 200) {
        option.xAxis[0].data = Object.keys(res.data)
        option.series[0].data = Object.values(res.data)
        console.log('===========', Object.keys(res.data))
        console.log('===========', Object.values(res.data))
        myChart.setOption(option)
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
@keyframes color-change {
  0% { color: #0d8d84; }
  50% { color: #fff; }
  100% { color:#0d8d84; }
}
</style>
